<template>
  <div class="blog-detail blog-section card-item" id="blog-section">
    <div class="blog-title">
      <span class="title">{{ blogStore.currentBlog.title }}</span>
      <blog-label :basic-blog="getBasicBlog(blogStore.currentBlog)"/>
    </div>

    <div class="blog-md card-item">
      <MdPreview editorId="blog-id"
                 v-model="blogStore.currentBlog.content"
                 :theme="appStore.isDark ? 'dark' : 'light'"/>
    </div>

    <div class="blog-copyright">
      <span>
        <strong>本文作者: </strong> Cxx
      </span>
      <span>
        <strong>本文链接: </strong>
        <a href="https://www.microsoft.com/">{{ currentUrl.href }}</a>
      </span>
      <span>
        <strong>版权声明: </strong>
        本博客所有文章除特别声明外，均采用
        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">©BY-NC-SA</a>
        许可协议。转载请注明出处！
      </span>
    </div>

    <div class="blog-ending">
      <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
    </div>

    <blog-comment-edit :parent-id="0"/>

    <blog-comment />
  </div>
</template>

<script setup lang="ts">
import BlogLabel from '@/components/Content/BlogLabel.vue'
import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
import BlogComment from '@/components/Comment/BlogComment.vue'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { useBlogStore } from '@/store/blog.ts'
import { useAppStore } from '@/store/app.ts'
import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'

const blogStore = useBlogStore()
const appStore = useAppStore()
const route = useRoute()

const currentUrl = new URL(window.location.href)

onMounted(async () => {
  const blogId = route.params.id as number
  blogStore.currentBlogId = blogId
  await blogStore.queryBlogById(blogId)
})
</script>

<style scoped lang="scss">
@use "@/styles/blog/blog.detail.module";
</style>
